"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { useRouter } from "next/navigation"
import {
    CalendarDays,
    BookOpen,
    CheckCircle,
    X,
    Send,
    User,
    Heart,
    BookMarked,
    Gem,
    Apple,
    Settings,
    Bell,
    LogOut,
    Award,
    Star,
    Calendar,
    BarChart3,
    FileText,
    Lock,
} from "lucide-react"
import {UserInfo} from "@/components/userinfo";
import useAppStore from "@/store/app.store";

export default function Sells() {
    const [activeCategory, setActiveCategory] = useState("all")
    const [currentPage, setCurrentPage] = useState(1)
    const itemsPerPage = 6
    // Demo items for the 随喜 tab
    const demoItems = [
        {
            id: 1,
            type: "jewelry",
            title: "佛教七宝手链",
            price: "¥298",
            description: "传统七宝手链，采用天然宝石制作，寓意吉祥如意。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 2,
            type: "book",
            title: "《心经》精装注解版",
            price: "¥128",
            description: "精装硬壳，古法线装，内含详细注解与历代高僧解读。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 3,
            type: "food",
            title: "有机五谷杂粮礼盒",
            price: "¥168",
            description: "纯天然有机种植，无添加剂，健康养生。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 4,
            type: "jewelry",
            title: "菩提子108颗念珠",
            price: "¥368",
            description: "选用优质菩提子，手工打磨抛光，佩戴舒适。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 5,
            type: "book",
            title: "《金刚经》古版影印",
            price: "¥198",
            description: "根据敦煌遗书影印，原貌呈现古代经文风采。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 6,
            type: "food",
            title: "有机茶叶礼盒",
            price: "¥258",
            description: "高山有机茶园，传统工艺，回甘悠长。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 7,
            type: "jewelry",
            title: "天然檀香佛珠",
            price: "¥188",
            description: "采用优质檀香木，手工雕刻，香气持久，佩戴舒适。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 8,
            type: "book",
            title: "《楞严经》精装版",
            price: "¥158",
            description: "精选优质纸张印刷，配有详细注解和历代高僧解读。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 9,
            type: "food",
            title: "有机蜂蜜礼盒",
            price: "¥228",
            description: "高山野生蜂蜜，无添加，纯天然，营养丰富。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 10,
            type: "jewelry",
            title: "纯银莲花吊坠",
            price: "¥328",
            description: "925纯银制作，精细雕刻，象征纯洁与智慧。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 11,
            type: "book",
            title: "《法华经》线装版",
            price: "¥188",
            description: "传统线装工艺，宣纸印刷，收藏与阅读兼备。",
            image: "/placeholder.svg?height=120&width=120",
        },
        {
            id: 12,
            type: "food",
            title: "有机素食干果礼盒",
            price: "¥198",
            description: "精选各类有机坚果，营养丰富，自然健康。",
            image: "/placeholder.svg?height=120&width=120",
        },
    ]

    const getItemIcon = (type: string) => {
        switch (type) {
            case "jewelry":
                return <Gem className="h-5 w-5 text-amber-brown" />
            case "book":
                return <BookMarked className="h-5 w-5 text-amber-brown" />
            case "food":
                return <Apple className="h-5 w-5 text-amber-brown" />
            default:
                return <Heart className="h-5 w-5 text-amber-brown" />
        }
    }

    // 根据分类过滤商品
    const filteredItems = activeCategory === "all" ? demoItems : demoItems.filter((item) => item.type === activeCategory)

    // 计算总页数
    const totalPages = Math.ceil(filteredItems.length / itemsPerPage)

    // 获取当前页的商品
    const paginatedItems = filteredItems.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)

    // 处理页面变化
    const handlePageChange = (newPage: number) => {
        if (newPage >= 1 && newPage <= totalPages) {
            setCurrentPage(newPage)
            // 滚动到页面顶部
            window.scrollTo({ top: 0, behavior: "smooth" })
        }
    }

    return (
        <div className="min-h-screen bg-ancient-scroll font-ancient text-ancient-text">
            <UserInfo active="随喜" />
            <div className="container mx-auto p-3 md:p-6 pb-20 max-w-5xl">
                <div className="bg-ancient-card/90 backdrop-blur-sm p-4 md:p-6 rounded-lg shadow-ancient mb-6">
                    <p className="text-center text-sm md:text-base">以下物品所得将用于古籍数字化保护工作</p>

                    {/* 分类选项 */}
                    <div className="flex flex-wrap justify-center gap-2 mt-4">
                        <Button
                            variant={activeCategory === "all" ? "default" : "outline"}
                            size="sm"
                            onClick={() => setActiveCategory("all")}
                            className="text-xs md:text-sm"
                        >
                            全部
                        </Button>
                        <Button
                            variant={activeCategory === "jewelry" ? "default" : "outline"}
                            size="sm"
                            onClick={() => setActiveCategory("jewelry")}
                            className="text-xs md:text-sm"
                        >
                            法宝饰品
                        </Button>
                        <Button
                            variant={activeCategory === "book" ? "default" : "outline"}
                            size="sm"
                            onClick={() => setActiveCategory("book")}
                            className="text-xs md:text-sm"
                        >
                            经书典籍
                        </Button>
                        <Button
                            variant={activeCategory === "food" ? "default" : "outline"}
                            size="sm"
                            onClick={() => setActiveCategory("food")}
                            className="text-xs md:text-sm"
                        >
                            有机食品
                        </Button>
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {paginatedItems.map((item) => (
                        <div
                            key={item.id}
                            className="bg-ancient-card/80 backdrop-blur-sm rounded-lg border border-amber-brown/30 shadow-ancient overflow-hidden"
                        >
                            <div className="p-4">
                                <div className="flex items-start gap-3">
                                    <div className="w-24 h-24 bg-ancient-scroll/50 rounded-md overflow-hidden flex-shrink-0">
                                        <img
                                            src={item.image || "/placeholder.svg"}
                                            alt={item.title}
                                            className="w-full h-full object-cover"
                                        />
                                    </div>
                                    <div className="flex-1">
                                        <div className="flex items-center gap-1 mb-1">
                                            {getItemIcon(item.type)}
                                            <span className="text-xs text-amber-brown/80">
                          {item.type === "jewelry" ? "法宝饰品" : item.type === "book" ? "经书典籍" : "有机食品"}
                        </span>
                                        </div>
                                        <h3 className="font-bold mb-1">{item.title}</h3>
                                        <p className="text-xs text-ancient-text/70 mb-2 line-clamp-2">{item.description}</p>
                                        <div className="flex justify-between items-center">
                                            <span className="font-bold text-amber-brown">{item.price}</span>
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                className="text-xs border-amber-brown/30 text-amber-brown hover:bg-amber-brown/10"
                                            >
                                                随喜
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* 分页控件 */}
                {totalPages > 1 && (
                    <div className="flex justify-center items-center mt-8 mb-4">
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handlePageChange(currentPage - 1)}
                            disabled={currentPage === 1}
                            className="text-xs md:text-sm"
                        >
                            上一页
                        </Button>
                        <span className="mx-4 text-sm">
                {currentPage} / {totalPages}
              </span>
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handlePageChange(currentPage + 1)}
                            disabled={currentPage === totalPages}
                            className="text-xs md:text-sm"
                        >
                            下一页
                        </Button>
                    </div>
                )}
            </div>
        </div>
    )
}